import { HttpEventType, HttpResponse } from '@angular/common/http';
import { AfterViewInit, Component, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';

import { BaseDirective } from '../../core/models/base-directive.model';
import { FooService } from '../shared/foo.service';
import { TimeZoneService } from '../shared/time-zone.service';

declare const $: any;

@Component({
    templateUrl: './material-template-driven-form.component.html',
    styleUrls: [
        './material-template-driven-form.component.scss'
    ]
})
export class MaterialTemplateDrivenFormComponent extends BaseDirective implements OnInit, OnChanges, AfterViewInit {
    user: any;
    gender: any[];
    timeZones: any[];
    timeZoneStates: any[];
    // treeData: TreeNode[];
    // selectedTreeData: TreeNode[];
    events: any[];
    // msgs: Message[] = [];
    selectedDate1: string;
    selectedDate2: string;
    fileUploadProgress: number = 0;
    cn: any;

    private alaskanTimeZoneState: any[];
    private pacificTimeZoneState: any[];
    private mountainTimeZoneState: any[];
    private centralTimeZoneState: any[];
    private easternZoneState: any[];

    constructor(
        // private confirmationService: ConfirmationService,
        private elementRef: ElementRef,
        private timeZoneService: TimeZoneService,
        private fooService: FooService
    ) {
        super();

        // this.trackByTimeZone = this.timeZoneService.trackByTimeZone;
    }

    ngOnInit(): void {
        super.ngOnInit();

        this.loadGenderData();
        this.loadTimeZones();
        this.prepareUserData();

        this.cn = {
            firstDayOfWeek: 0,
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesMin: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            today: '今日',
            clear: '清除'
        };

        // this.fooService.loadTree().subscribe(data => this.treeData = data);
        // this.fooService.loadEvent().subscribe(data => this.events = data);
    }

    // ngOnChanges ONLY works with parent-child mode. For monitoring the input property via data binding.
    // Example: <hero-form [title]="abc"></hero-form>
    ngOnChanges(changes: SimpleChanges): void {
        // console.log(`Prechange: ${changes.title.previousValue}. Postchange: ${changes.title.currentValue}`);
    }

    ngAfterViewInit(): void {
        this.commonService.appendScriptChildToElement(this.elementRef, [
            'js/custom-form-float.js',
            'dependencies/dropzone-master/dist/dropzone.js',
            'dependencies/bootstrap-select/bootstrap-select.min.js'
        ]);

        // $(function () {
        // $(".select2").select2();
        // $('.selectpicker').selectpicker();
        // $('#mdate').bootstrapMaterialDatePicker({
        //     weekStart: 0,
        //     lang: 'zh-cn',
        //     time: true,
        //     shortTime: false, 
        //     clearButton: true, 
        //     nowButton: true
        // });
        // });
    }

    clearUpload(): void {
        this.fileUploadProgress = 0;
    }

    upload(event): void {
        this.httpRequestService.upload(event.files, '/file/upload').subscribe(event => {
            // Via this API, you get access to the raw event stream.
            // Look for upload progress events.
            if (event.type === HttpEventType.UploadProgress) {
                // This is an upload progress event. Compute and show the % done:
                this.fileUploadProgress = this.commonService.calculatePercentage(event.loaded, event.total);
            } else if (event instanceof HttpResponse) {

            }
        });
    }

    onMaterialDateSelected(selectedValue: string): void {
        console.log('Date selected: ' + selectedValue);
    }

    onTimeZoneChange(timeZoneId: string): void {
        switch (timeZoneId) {
            case "1":
                this.timeZoneService.loadAlaskanTimeZoneState().subscribe(data => { this.timeZoneStates = data });
                break;
            case "2":
                this.timeZoneService.loadPacificTimeZoneState().subscribe(data => { this.timeZoneStates = data });
                break;
            case "3":
                this.timeZoneService.loadMountainTimeZoneState().subscribe(data => { this.timeZoneStates = data });
                break;
            case "4":
                this.timeZoneService.loadCentralTimeZoneState().subscribe(data => { this.timeZoneStates = data });
                break;
            case "5":
                this.timeZoneService.loadEasternZoneState().subscribe(data => { this.timeZoneStates = data });
                break;
        }

        // this.user.timeZoneState = this.timeZoneStates[0].id;
    }

    onSubmit(): void {
        // this.confirmationService.confirm({
        //     message: 'Are you sure that you want to save the data?',
        //     accept: () => {
        //         this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'Data saved' });
        //     }
        // });
    }

    /**
     * Prepares the local user data.
     */
    private prepareUserData(): void {
        this.user = {
            id: 1,
            name: 'Jenny',
            password: '',
            confirmPassword: '',
            gender: 0,
            age: 18,
            likeBeef: false,
            timeZone: 5,
            timeZoneState: 20
        };

        this.onTimeZoneChange(this.user.timeZone.toString());
    }

    /**
     * Loads the gender data for binding.
     */
    private loadGenderData(): void {
        this.timeZoneService.loadGender().subscribe(data => {
            this.gender = data;
        });
    }

    /**
     * Loads the time zone data for binding.
     */
    private loadTimeZones(): void {
        this.timeZoneService.loadTimeZones().subscribe(data => {
            this.timeZones = data;
        });
    }
}